import data from '../common/data.json';

var timer = null;
var cHeight = document.documentElement.clientHeight;
function lazyload(selector){
    //selector是一组图片
    let imgList = document.querySelectorAll(".waitload img");
    // 元素的offset操作会导致页面回流;
    let itemArray = Array.from(imgList).map(item => {
        return {
              img:item,
              top : item.offsetTop,
              src : item.getAttribute("data-src")
        }
    })
    load(itemArray);
    window.addEventListener("scroll",load.bind(null,itemArray));
}

function load(itemArray){
    if(timer !==null) return;//节流
    //clearInterval(timer);//去抖；
    timer = setTimeout(()=>{
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        var min = scrollTop + cHeight;
        itemArray.forEach(item =>{
            if(item.top<min){
                item.img.src = item.src;
            }
        })
        timer = null;
    },600)
}
 // 1. 节流 间隔时间内只能触发一次 | 降低触发频率  2. 去抖;  在最后一次操作的xxx时间之后执行程序;
 

class Pagination{
    init(){
        this.con = document.getElementById("conUl");
        this.con2 = document.getElementById("imgright");
        this.next = document.getElementById("next");
        this.prev = document.getElementById("prev");
        this.renext= document.getElementById("renext");
        // this.todetail = document.querySelectorAll(".to_detail");
        // this.todetailh = document.querySelectorAll(".to_detailh");
        this.btnList = [];
        this.list = data.goods_list;
        // 一页显示多少个;
        this.renderNum = 12;
        // 页码;
        this.page = 1;
        this.page_total = 0;
        this.render();
        this.renderPageBtn();
        this.bindEvent();
    }
    bindEvent(){
        this.next.addEventListener("click",this.nextPage.bind(this));
        this.renext.addEventListener("click",this.nextPage.bind(this));
        this.prev.addEventListener("click",this.prevPage.bind(this));
        this.btnList.forEach( (ele,index) => {
                ele.addEventListener("click",this.toPage.bind(this,index+1))
        })
        this.next.parentNode.addEventListener("click",this.reRender.bind(this))
        this.renext.parentNode.addEventListener("click",this.reRender.bind(this));
    }
    reRender(){
        this.btnList.forEach((ele,index)=>{
            if(index + 1 === this.page){
                ele.className = "activelist";
            }else{
                ele.className = "";
            }
        })
        this.render();
    }
    nextPage(){
        if(this.page === this.page_total){
            return false;
        }else{
            this.page ++;
        }
    }
    prevPage(){
        if(this.page ===1){
            return false;
        }else{
            this.page--;
        }
    }
    toPage(index){
        this.page = index;
    }
    renderPageBtn(){
        this.page_total = Math.ceil( this.list.length / this.renderNum);
       
        let btnWrap = document.createDocumentFragment();
        for(var i = 1 ; i <= this.page_total ; i ++){
              let li = document.createElement("li");
              let a = document.createElement("a");
              a.innerHTML = i;
              li.appendChild(a);
              if(i === this.page){
                   li.className = "active" ;
              }
              btnWrap.appendChild(li);
              this.btnList.push(li);
        }  
        this.next.parentNode.insertBefore(btnWrap,this.next);
    }
    render(){
        this.page_total = Math.ceil( this.list.length / this.renderNum);
        var nowIndex = document.getElementById("nowindex");
        var totalIndex = document.getElementById("totalindex");
        nowIndex.innerHTML = this.page;
        totalIndex.innerHTML ="/"+ this.page_total;
        //data.goods_list是个数组
        var list = data.goods_list;
        var html = "";
        var html2 = "";
        for(var i = this.renderNum*(this.page-1);i<this.renderNum * this.page;i++){
            let item = list[i];
            if(!item) continue;
            html += ` <li class="hover">
            <div class="img" data-id="${item.goods_id}">
                <a href="javascript:void(0);"  class="waitload to_detail">
                    <img width="162" height="162" alt="批量质保五年的茶餐厅桌椅款式|茶餐厅家具定做报价"
                        data-src="${item.thumb_url}" src="https://upload-images.jianshu.io/upload_images/17221238-885347922a778385.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
                </a>
            </div>
            <h3 class="title to_detailh">
                <a href="#">批量<b>质保</b>五年的茶餐厅桌椅款式|茶餐厅<b>家具</b>定做报价</a>
            </h3>
            <dl class="extension_dl">
                <dt>产品类别</dt>
                <dd>餐桌</dd>
                <dt>品牌</dt>
                <dd>行一</dd>
                <dt>适用年龄段</dt>
                <dd>成年</dd>
                <dt>材质</dt>
                <dd>板式</dd>
                <dt>适用场合</dt>
                <dd>户外,酒店,客厅,餐厅,卧室,酒吧</dd>
                <dt>风格</dt>
                <dd>韩式</dd>
            </dl>
            <div class="main_products">主营产品：
                <span>火锅店家具</span>
                <span>西餐厅家具</span>
                <span>定制高档桌椅</span>
                <span>茶餐厅中餐厅家具</span>
            </div>
            <div class="extension_right">
                <span class="su-price ">
                    <font class="redpc">￥</font>
                    <i>${parseInt(item.group_price/100)}</i>
                    <font class="fts">.00<span>/件</span></font>
                </span>
                <p><a href="#" target="_blank" title="深圳市典艺坊商业家具有限公司">深圳市典艺坊商业家具有限公司</a></p>
                <p>所在地：广东 深圳 </p>
               
            </div>
        </li>`;
        html2 += `<li class="waitload">
            <img data-src="${item.hd_thumb_url}" src="https://upload-images.jianshu.io/upload_images/17221238-885347922a778385.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
            <p>${item.short_name}</p>
        </li>`
        }
        let con = document.getElementById("conUl");
        let con2 = document.getElementById("imgright");
        con.innerHTML = html;
        con2.innerHTML = html2;
        lazyload(".waitload img");
        this.toDetail();
    }
    toDetail(){
        var todetail = $(".to_detail");
        todetail.click(function(){
            var dataId = $(this).parent().attr("data-id");
            localStorage.setItem("dataId",dataId);
            window.open("./detail.html");
        });
}
}
var page = new Pagination();
page.init();
// <span class="inquiry_a open addcart" >加入购物车</span>
// <div class= "cartBtn"  data-id="${item.goods_id}">
//     <span class= "reduceBtn">-</span>
//     <span class= "add_total">0</span>
//     <span class= "addBtn">+</span>
// </div>
